/**
 * 服务卡片组件
 * 
 * 功能描述：
 * - 展示医疗服务项目的卡片组件
 * - 包含服务图标、名称、描述等信息
 * - 支持标签显示（如"热门"、"推荐"等）
 * - 提供悬停动画效果和交互反馈
 * 
 * 使用场景：
 * - 首页服务项目展示
 * - 医疗服务分类展示
 * - 功能模块入口展示
 * 
 * 作者：系统
 * 创建时间：2024
 */

import { Calendar, MessageCircle, Clipboard } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

// 内联类型定义
interface Service {
  id: string;
  name: string;
  icon: string;
  description: string;
  tag?: string;
}

interface ServiceCardProps {
  service: Service;
}

const iconMap = {
  calendar: Calendar,
  'message-circle': MessageCircle,
  clipboard: Clipboard,
};

export default function ServiceCard({ service }: ServiceCardProps) {
  const navigate = useNavigate();
  const IconComponent = iconMap[service.icon as keyof typeof iconMap];

  const handleServiceClick = () => {
    switch (service.name) {
      case '在线咨询':
        navigate('/online-consultation');
        break;
      case '预约挂号':
        navigate('/outpatient-appointment');
        break;
      case '复诊开方':
        navigate('/medication-advice');
        break;
      default:
        break;
    }
  };

  return (
    <div 
      className="flex flex-col items-center space-y-3 group cursor-pointer"
      onClick={handleServiceClick}
    >
      <div className="relative">
        <div className="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110">
          <IconComponent className="text-white" size={28} />
        </div>
        {service.tag && (
          <div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full font-bold shadow-md">
            {service.tag}
          </div>
        )}
      </div>
      <div className="text-center">
        <div className="text-sm font-semibold text-gray-900 mb-1 group-hover:text-primary-600 transition-colors">
          {service.name}
        </div>
        <div className="text-xs text-gray-500 leading-relaxed">
          {service.description}
        </div>
      </div>
    </div>
  );
} 